<template>
    <div>
        <div class="row">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="row">
            <el-input
            placeholder="请输入内容"
            v-model="input"
            :disabled="true">
            </el-input>
        </div>
        <div class="row">
            <el-input
            placeholder="请输入内容"
            v-model="input"
            clearable>
            </el-input>
        </div>
        <div class="row">
            <el-input placeholder="请输入密码" v-model="input" show-password></el-input>
            <el-input placeholder="请输入密码" v-model="input" show-password></el-input>
        </div>
        <div class="row">
            属性方式：
            <el-input
                placeholder="请选择日期"
                suffix-icon="el-icon-date"
                v-model="input">
            </el-input>
            <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="input">
            </el-input>
            </div>
            <div class="row">
            slot 方式：
            <el-input
                placeholder="请选择日期"
                v-model="input">
                <i slot="suffix" class="el-input__icon el-icon-date"></i>
            </el-input>
            <el-input
                placeholder="请输入内容"
                v-model="input">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
        </div>
        <div class="row">
            <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                resize="both"
                v-model="textarea">
            </el-input>
        </div>
        <div class="row">
            <el-input
                type="textarea"
                autosize
                placeholder="请输入内容"
                v-model="textarea">
            </el-input>
            <div style="margin: 20px 0;"></div>
            <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="textarea">
            </el-input>
        </div>
        <div class="row-pend">
            <el-input placeholder="请输入内容" v-model="input">
                <template slot="prepend">Http://</template>
                <template slot="append">.com</template>
            </el-input>
        </div>
        <div class="row">
            <el-input
                placeholder="请输入内容"
                suffix-icon="el-icon-date"
                v-model="input1">
            </el-input>
            <el-input
                size="medium"
                placeholder="请输入内容"
                suffix-icon="el-icon-date"
                v-model="input2">
            </el-input>
            <el-input
                size="small"
                placeholder="请输入内容"
                suffix-icon="el-icon-date"
                v-model="input3">
            </el-input>
            <el-input
                size="mini"
                placeholder="请输入内容"
                suffix-icon="el-icon-date"
                v-model="input4">
            </el-input>
        </div>
        <div class="row">
            <el-input
                type="text"
                placeholder="请输入内容"
                v-model="input"
                maxlength="10"
                show-word-limit
            >
            </el-input>
            <div style="margin: 20px 0;"></div>
            <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="input"
                maxlength="30"
                show-word-limit
            >
            </el-input>
        </div>
    </div>
</template>

<script>
import ElInput from '../../components/Input/index'

export default {
    name: 'InputShownPage',
    data() {
        return {
            input: '123',
            textarea: ''
        }
    },
    methods: {
        
    },
    components: {
        ElInput
    }
}
</script>

<style>
    .row {
        margin-top: 20px;
    }

    .row .el-input,.row .el-textarea {
        width: 180px;

        vertical-align: top;
        margin: 0 10px 10px 0;
    }

    .row-pend {
        margin-top: 20px;
    }

    .row-pend .el-input {
        width: 360px;
    }

</style>